import axios from "axios";
import React, { useState, useReducer, useContext, useRef, useImperativeHandle } from "react";

const Box = React.forwardRef((props, ref) => {
  const [count,setCount]=useState(100);
  useImperativeHandle(ref, () => {
    //自定义暴露出去给父组件
    return {
      msg:"辣条",
      count,
      add(){
        setCount(count+1)
      }
    }
  });
  return (
    <div >
      <h1>Box------{count}</h1>
    </div>
  );
});
function App() {
  const boxRef = useRef(null);
  const [msg,setMsg]=useState("");
  return (
    <div>
      <h1>APP------{msg}</h1>
      <button onClick={()=>{
        console.log(boxRef);
        boxRef.current.add()
        setMsg(boxRef.current.msg)
      }}>获取内容</button>
      <hr></hr>

      {/* 给函数组件设置ref */}
      <Box ref={boxRef}></Box>
    </div>
  );
}

export default App;
